<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .title {
            background-color: orange;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">  /*此处一定要写babel*/
        //1.创建虚拟dom
        const myId = 'aTgUiGu'
        const myData = 'HeLlo,rEaCt'

        const VDOM = (
            <div>
                <h2 className="title" id={myId.toLowerCase()}>
                    <span style={{ color: 'white', fontSize: '29px' }}>{myData.toLowerCase()}</span>
                </h2>
                <h2 className="title" id={myId.toUpperCase()}>
                    <span style={{ color: 'white', fontSize: '29px' }}>{myData.toLowerCase()}</span>
                </h2>

                <input type="text"></input>
                <Good>123</Good>
            </div>


        )
        //2.渲染dom到页面
        ReactDOM.render(VDOM, document.getElementById('test'))

        /*
            jsx语法规则
                1.定义虚拟dom时 不要写引号
                2.标签中混入js表达式时候用{}
                3.央视的类名指定不要用class 用className
                4.内联样式要用style={{key:value}}
                5.虚拟dom只能有一个根标签
                6.标签必须闭合
                7.标签首字母
                    (1)若小写字母开头 则将标签改为html的同名元素 若html中无同名元素 则报错
                    (2)若大写字母开头 react去渲染对应的组件 若组件没有定义 则报错
        */
    </script>
</body>

</html>